<template>
    <div style="height: 100vh;overflow: hidden;">
        <navbar :title="$t('todo_tips_5')">
            <template #right>
                <span @click="onSubmit()" style="width: unset; padding-right: 10px;" class="font-size14 write-btn-right head-right cur">{{ $t('save') }}</span>
            </template>
        </navbar>
        <div class="content-noBottom white-bg" style="overflow: auto;">
            <div>
                <van-form ref="form" label-width="5em" @submit="submitApply">
                    <div v-for="(item,index) in examList" :key="index" style="padding:12px">
                        <!-- 情景题 -->
                        <template v-if="item.type === 'SI'">
                            <div class="grade">{{index+1+"、"+item.questionTitle}}</div>
                            <div v-for="(sonItem,sonIndex) in item.questionInfoDTOList" :key="sonIndex">
                                <div class="grade">{{"("+(sonIndex+1)+")、"+sonItem.questionTitle}}</div>
                                <div class="answer">
                                    <div class="anserContent" v-html="sonItem.content"></div>
                                    <div>
                                        <p class="answerQue">{{$t('exam_rpt_nbr_anwser')}}:{{sonItem.questionAnswerDTO.referenceAnswer && sonItem.questionAnswerDTO.referenceAnswer!=='null'? sonItem.questionAnswerDTO.referenceAnswer: '--'}}</p>
                                        <div v-if="sonItem.userSubmitAnswerDTO && sonItem.type==='SR'" class="student_answer"><span style="margin-right:5px">{{$t('student_answer')}}:</span><audio :src="sonItem.userSubmitAnswerDTO.referenceAnswer"  class="con-box-video"  controls="controls"></audio></div>
                                        <p v-else><span style="margin-right:5px">{{$t('student_answer')}}:</span>{{sonItem.userSubmitAnswerDTO.referenceAnswer || '--'}}</p>
                                    </div>
                                </div>
                                <div class="playRecording" v-if="sonItem.type==='SR'">
                                    <audio src="">{{$t('personal.play_recording')}}</audio>
                                </div>
                                <div class="mark">
                                    <!-- 所得分数 -->
                                    <van-field style="padding-left: 0;width: auto;padding-right:5px" type="number" :key="index" :label="$t('get_score') + `：`" v-model="sonItem.mark"
                                    :rules="[
                                    { required: true,message: $t('score_not_null')},
                                    { validator: (event,callback)=>checkMoney(event,sonItem.queScore,callback), message: $t('score_tips')}
                                    ]">
                                        <template slot="input">
                                            <input class="border_none"  v-model="sonItem.mark" :placeholder="$t('tips_6')"/>
                                        </template>
                                    </van-field>
                                    <span style="margin-top:20px">/{{sonItem.queScore}}</span>
                                </div>
                            </div>
                        </template>
                        <template v-else>
                            <div class="grade">{{index+1+"、"+item.questionTitle}}</div>
                            <div class="answer">
                            <div class="anserContent" v-html="item.content"></div>
                            <div>
                                <p class="answerQue">{{$t('exam_rpt_nbr_anwser')}}:{{item.questionAnswerDTO.referenceAnswer && item.questionAnswerDTO.referenceAnswer!=='null'? item.questionAnswerDTO.referenceAnswer: '--'}}</p>
                                <div v-if="item.userSubmitAnswerDTO && item.type==='SR'" class="student_answer"><span style="margin-right:5px">{{$t('student_answer')}}:</span><audio :src="item.userSubmitAnswerDTO.referenceAnswer"  class="con-box-video"  controls="controls"></audio></div>
                                <p v-else><span style="margin-right:5px">{{$t('student_answer')}}:</span>{{item.userSubmitAnswerDTO.referenceAnswer || '--'}}</p>
                            </div>
                            </div>
                            <div class="playRecording" v-if="item.type==='SR'">
                            <!-- <el-button class="sm-bt-BU">{{$t('personal.play_recording')}}</el-button> -->
                            <audio src="">{{$t('personal.play_recording')}}</audio>
                            </div>
                            <div class="mark">
                                <!-- 所得分数 -->
                                <van-field style="padding-left: 0;width: auto;padding-right:5px" type="digit" :key="index" :label="$t('get_score') + `：`" v-model="item.mark"
                                :rules="[
                                    { required: true,message: $t('score_not_null')},
                                    { validator: (event,callback)=>checkMoney(event,item.queScore,callback), message: $t('score_tips')}
                                ]">
                                    <template slot="input">
                                        <input class="border_none"  v-model="item.mark" :placeholder="$t('tips_6')"/>
                                    </template>
                                </van-field>
                                <span style="margin-top:20px">/{{item.queScore}}</span>
                            </div>
                        </template>
                    </div>
                </van-form>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>

<script>
import { Toast } from 'vant';
import CommonLoading from '@/components/common/loading';
export default {
    name: 'examGradingDetail',
    components: {
        CommonLoading,
        Toast
    },
    data() {
        return {
            isLoading: false,
            examList: [],
            scoreDTOList: [],
            isShow: false
        };
    },
    methods: {
        checkMoney(value, queScore, callback) {
            if (!value) {
                return false;
            }
            const intValue = parseInt(value, 10);
            if (isNaN(intValue) || intValue < 0 || intValue > queScore) {
                return false;
            }
        },
        onSubmit(values) {
            const formPromises = [this.$refs.form.validate()];
            Promise.all(formPromises).then(results => {
                const allValid = results.every(valid => !valid);
                if (allValid) {
                    // 所有表单校验通过，执行提交逻辑
                    this.submitApply();
                } else {
                    // 存在校验失败的表单 表单校验未通过
                }
            });
        },
        submitApply() {
            this.examList.forEach((item, i) => {
                if (item.type === 'SI') {
                    item.questionInfoDTOList.forEach((child, j) => {
                        this.scoreDTOList.push({ queScore: child.mark, subjectId: child.subjectId });
                    });
                } else {
                    this.scoreDTOList.push({ queScore: item.mark, subjectId: item.subjectId });
                }
            });
            const data = {
                attemptNbr: this.$route.params.attemptNbr,
                modResId: this.$route.params.id,
                scoreDTOList: this.scoreDTOList,
                tkhId: this.$route.params.tkhId
            };
            this.$axios({
                method: 'POST',
                url: '/app/api/trainee/scoring/submit/scoring',
                data: data
            }).then(res => {
                Toast.success(this.$t('save_successful'));
                this.$router.go(-1);
            });
        },
        getInfo() {
            this.isLoading = true;
            this.$axios({
                method: 'POST',
                url: `/app/api/trainee/scoring/quetion/info`,
                data: {
                    pgrAttemptNbr: this.$route.params.attemptNbr,
                    pgrResId: this.$route.params.id,
                    pgrTkhId: this.$route.params.tkhId
                }
            }).then(res => {
                this.isLoading = false;
                const reg = /autoplay="false"/i;
                res.data.questionInfoDTOList.forEach(item => {
                    item.content = item.content.replace(reg, '');
                });
                this.examList = res.data.questionInfoDTOList;
                this.examList.forEach((item, i) => {
                    if (item.type === 'SI') {
                        item.questionInfoDTOList.forEach((child, j) => {
                            this.$set(child, 'mark', null);
                        });
                    } else {
                        this.$set(item, 'mark', null);
                    }
                });
            });
        }
    },
    mounted() {
        this.getInfo();
    }
};
</script>

<style scoped lang="less">
    .content-noBottom{
        margin: 69px 12px;
        height: calc( 100vh - 80px);
        border-radius: 5px;
        padding: 0;
        .grade{
          font-weight: bolder;
          padding: 6px 0px;
        }
        .answerQue{
            margin: 10px 0;
        }
        .border_none{
            border: 1px solid #eee;
            border-radius: 4px;
            padding-left: 5px;
            height: 30px;
            margin-left: -12px;
        }
        .mark{
            display: flex;
            /deep/.van-cell::after{
              border: none;
            }
            /deep/.van-field__error-message{
               margin-left: -12px;
            }
        }
    }

</style>
